import { createStore } from "vuex"
import { type IState, IUserInfo } from "../models/IUserInfo"

// 定义约束
const state: IState = {
    user: {
        id: "1",
        account: "freewsf@qq.com",
        avatar: "string",
        nickname: "wy",
        status: 1,
    } as IUserInfo,
    admin: {
        id: 1
    }
}

/*
* 定义getter
* getters就是在state上进行的封装
* getters可以对state里面的数据起到过滤的作用，比如返回角色是超级管理员的用户。
*/
const getters = {

    //注意：这个是属性，调用： store.getters.getUserName
    getUserName(state?: IState) {
        return state?.user.nickname
    },

    getUserNameFun:(state?: IState)=> ()=>{
        return state?.user.nickname
    },

    //这个是方法  调用: store.getters.isAdmin()
    isAdmin: (state?: IState) => (id:(number|null)) => {
        if(id)
        {
            return id === state?.admin.id
        }

        return state?.user.id === state?.admin.id
    }
}

/*
 * mutation 
 * 更改Vuex的store中的状态的唯一方法是提交mutation。接受state作为第一个参数。
 * mutation本质上是一个回调函数，无法直接调用的，
 * 定义一个mutation 相当于发布或者注册一个回调函数，方法名为 事件的类型
 * 是通过commit来调用的，并且只能同步使用
 */
const mutations = {
    setUserInfo(state: IState, user: IUserInfo) {
        state.user.id = user.id
    },
    updateNickname(state: IState, user: IUserInfo) {
        state.user.nickname = user.nickname;
    }
}

const actions = {
    updateNickname(context:any, payload: IUserInfo) {
        setTimeout(() => {
            context.commit('updateNickname', payload)
        }, 2000)
    }
}

/**
 * commit使用mutation中函数
 * commit 就相当于订阅事件，订阅 mutation中发布的事件。
 * store.commit('事件类型即方法名',参数值)
 * 
 * // 使用commit有两种方式
 */


//配置store
const store = createStore({
    state: state,
    getters: getters,
    mutations: mutations,
    actions: actions
})

/*
* 注意：这里导出的就是一个对象，不能再把对象搞成对象  export default { store:store} 这是错误的
* 或者  export {
*   state: state,
    getters: getters,
    mutations: mutations,
    actions: actions
* }
    这样也可以的
*/
export default store 